<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="telephone=no" name="format-detection">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>宣和艺网-共享艺术服务平台</title>
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/public.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/jquery.bxslider.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/style.css}" />
  <script type="text/javascript" th:src="@{/js/mobile/jquery1.11.3.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/jquery.bxslider.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/index.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/redirectPc.js}"></script>
  <style>
    table {
      border-spacing: 0;
      border-collapse: collapse;
    }

    .homeDzzxBW ul li {
      margin-right: 2px;
      margin-bottom: 5px;
    }
  </style>
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?d554d2fe469092ab25a4245851a644f0";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

</head>

<body>
  <!--手机搜索begin-->
  <div id="nav-search">

  </div>
  <div class="drawer-section search_div">
    <div class="search_con">
      <form action="" style="width: 100%;height: 100%;">
        <input name="names" type="text" class="input1" value="搜索" onFocus="if(value=='搜索'){value=''}"
          onBlur="if(value==''){value='搜索'}" />
        <input type="submit" value="" class="bnt1" />
      </form>
    </div>
  </div>
  <!--top-->
  <div id="top">
    <div class="wrap clearfloat">
      <div th:replace="~{mobile/component/header :: index_menu}"></div>

      <div class="topPhone clearfloat">

      </div>
    </div>
    <div class="muen1" style="right: 56px;"> <span class="muenX"></span> <span class="muenY">
        <img class="img1" th:src="@{/images/mobile/search_image.png}" />
      </span> <span class="muenZ"></span> </div>
    <div class="muen"> <span class="muenX"></span> <span class="muenY"></span> <span class="muenZ"></span> </div>
  </div>
  <!--/top-->

  <!--main-->
  <div class="main">
    <div class="banner">
      <ul class="slider1">
        <li> <a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}" /><img class="img2"
              th:src="@{/images/mobile/banner_wap.png}" /></a>
        </li>
        <li> <a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}" /><img class="img2"
              th:src="@{/images/mobile/banner_wap.png}" /></a>
        </li>
        <li> <a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}" /><img class="img2"
              th:src="@{/images/mobile/banner_wap.png}" /></a>
        </li>
      </ul>
    </div>


    <div class="wrap clearfloat">
      <div class="pshowtit">
        《[[ ${artwork.name} ]]》
        <span>[[ ${artwork.artistName} ]]</span>
      </div>

      <div class="show-pic">
        <img th:src="${artwork.url}" style="width: 100%" />
      </div>

      <div class="homeDzzxBW">
        <ul class="sliderHomeDzzc clearfloat">
          <li><a href="">
              <div class="pic">
                <img th:src="${artwork.url}" />
              </div>

            </a>
          </li>

          <li th:each="artworkOtherPic:${artworkOtherPics}"><a href="">
              <div class="pic"><img
                      th:src="${artworkOtherPic.url}" />
              </div>

            </a>
          </li>


        </ul>
      </div>




      <div class="aboutR">
        <div class="detailed_pro">
          <div class="protit">
            <span>艺术品详细</span>
          </div>
          <table>
            <tbody>
              <tr>
                <td style="width: 40%; background: rgb(245, 247, 248); font-weight: bold;">艺术品名称</td>
                <td>[[ ${artwork.name} ]]</td>
              </tr>
              <tr>
                <td style="width: 40%; background: rgb(245, 247, 248); font-weight: bold;">作者</td>
                <td>[[ ${artwork.artistName} ]]</td>
              </tr>
              <tr>
                <td style="width: 40%; background: rgb(245, 247, 248); font-weight: bold;">艺术品类型</td>
                <td>[[ ${artwork.artTypeName} ]]</td>
              </tr>
              <tr>
                <td style="width: 40%; background: rgb(245, 247, 248); font-weight: bold;">创作时间</td>
                <td>[[ ${artwork.createSrt} ]]</td>
              </tr>
              <tr>
                <td style="width: 40%; background: rgb(245, 247, 248); font-weight: bold;">编号</td>
                <td>[[ ${artwork.artworkNum} ]]</td>
              </tr>
              <tr>
                <td style="width: 40%; background: rgb(245, 247, 248); font-weight: bold;">规格</td>
                <td>[[ ${artwork.spec} ]]</td>
              </tr>
              <tr>
                <td style="width: 40%; background: rgb(245, 247, 248); font-weight: bold;">价格</td>
                <td>[[ ${artwork.price == null || artwork.price == 0 ? '****' : artwork.price + "元"} ]]</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="parameter">
          <div class="protit">
            <span>艺术品介绍</span>
          </div>
          <p><div
                  th:title="${artwork.remarks}" th:utext="${artwork.remarks}"></div></p>
        </div>
      </div>
    </div>


  </div>

  <!--/main-->

  <!--/main-->

  <!--footer-->
  <div th:replace="~{mobile/component/footer :: footer}"></div>
  <!--/footer-->

  <!--wap-->
  <div th:replace="~{mobile/component/footer :: footer_menu}"></div>
  <!--/wap-->

  <div class="wapBg"></div>
</body>
<script type="text/javascript">
  $('.slider1').bxSlider({
    'auto': true,
    'controls': true,
    'touchEnabled': true,
    'pager': true,
    'speed': 1000,
    'pause': 4000,

  })

  $('.sliderHomeSpT').bxSlider({
    'auto': false,
    'controls': true,
    'touchEnabled': true,
    'pager': true,

  })



  var lineW = $(".lineW span").width();
  $('.sliderHomeSpB').bxSlider({
    'auto': false,
    infiniteLoop: true,
    'controls': true,
    'touchEnabled': true,
    'pager': true,
    'slideWidth': '204',
    'minSlides': 2,
    'maxSlides': 5,
    'moveSlides': 5,
    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
      var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
      var lineWW = $(".lineW").width();


      if (newIndex == 0) {
        $(".lineW span").css({
          "width": lineW + 'px'
        })
      } else {
        $(".lineW span").css({
          "width": (lineWW / num) * (newIndex + 1) + 'px'
        })
      }

    },


  })


  $('.sliderHomeDzzc').bxSlider({
    'auto': false,
    'controls': false,
    'touchEnabled': true,
    'pager': false,
    'slideWidth': '100',
    'minSlides': 4,
    'maxSlides': 4,
    'moveSlides': 1,
    'speed': 600,
    //	    'slideMargin': 20
  })



</script>

<!--slick-->
<script th:src="@{/js/mobile/slick.min.js}" type="text/javascript" charset="utf-8"></script>

</html>
